<script setup lang="ts">
import { ref, onMounted, computed } from 'vue';
import { useRouter } from 'vue-router';
import { useTaskStore } from '@/stores';
import TaskProgressCircle from '@/components/TaskProgressCircle.vue';

const router = useRouter();
const taskStore = useTaskStore();
const loading = ref(true);
const error = ref<string | null>(null);

// 获取任务统计数据
const taskStats = computed(() => {
  return taskStore.getTaskStatsByExtcode();
});

// 将统计数据转换为数组，方便渲染
const taskStatsArray = computed(() => {
  return Object.entries(taskStats.value).map(([extcode, stats]) => ({
    extcode,
    ...stats
  }));
});

// 跳转到extcode详情页
function navigateToExtcode(extcode: string) {
  router.push(`/extcode/${extcode}`);
}

// 获取任务数据
async function fetchData() {
  loading.value = true;
  error.value = null;
  try {
    await taskStore.fetchTasks();
  } catch (err) {
    error.value = err instanceof Error ? err.message : '获取数据失败';
  } finally {
    loading.value = false;
  }
}

onMounted(() => {
  fetchData();
});
</script>

<template>
  <div class="index-container">
    <!-- <h2 class="page-title">任务状态概览</h2> -->
    
    <!-- 加载状态 -->
    <div v-if="loading" class="loading-container">
      <div class="loading-spinner"></div>
      <p>加载任务数据中...</p>
    </div>
    
    <!-- 错误提示 -->
    <div v-else-if="error" class="error-container">
      <p>{{ error }}</p>
      <button @click="fetchData" class="btn btn-primary">重试</button>
    </div>
    
    <!-- 数据为空 -->
    <div v-else-if="taskStatsArray.length === 0" class="empty-container">
      <p>暂无任务数据</p>
    </div>
    
    <!-- 任务状态卡片 -->
    <div v-else class="task-cards-grid">
      <div 
        v-for="stat in taskStatsArray" 
        :key="stat.extcode"
        class="task-card"
        @click="navigateToExtcode(stat.extcode)"
      >
        <TaskProgressCircle 
          :pending="stat.pending" 
          :processing="stat.processing" 
          :completed="stat.completed" 
          :total="stat.total"
        />
        <div class="task-card-info">
          <h3 class="task-card-title">{{ stat.extcode }}</h3>
          <div class="task-card-stats">
            <span class="stat-item stat-pending">待处理: {{ stat.pending }}</span>
            <span class="stat-item stat-processing">处理中: {{ stat.processing }}</span>
            <span class="stat-item stat-completed">已完成: {{ stat.completed }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.index-container {
  padding: 1rem 0;
}

.page-title {
  margin-bottom: 2rem;
  color: var(--text-primary);
  font-size: 1.75rem;
  text-align: center;
}

.loading-container,
.error-container,
.empty-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  text-align: center;
}

.loading-spinner {
  width: 50px;
  height: 50px;
  border: 5px solid var(--bg-tertiary);
  border-top-color: var(--primary-color);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 1rem;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.task-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2rem;
  margin-top: 1rem;
}

.task-card {
  background-color: var(--bg-secondary);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-md);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.task-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
}

.task-card-info {
  margin-top: 1.5rem;
  text-align: center;
  width: 100%;
}

.task-card-title {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  color: var(--primary-color);
}

.task-card-stats {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.stat-item {
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.25rem 0.5rem;
  border-radius: var(--border-radius-sm);
}

.stat-pending {
  color: var(--pending-color);
  background-color: rgba(108, 77, 219, 0.1);
}

.stat-processing {
  color: var(--processing-color);
  background-color: rgba(255, 107, 53, 0.1);
}

.stat-completed {
  color: var(--completed-color);
  background-color: rgba(42, 157, 143, 0.1);
}
</style>